<template>
    <div :class="{'opacity_panel': !showPanel}" class="audit_panel">
        <!--催收操作面板-->
        <h2 style="padding-top: 10px; padding-left: 15px;"><i class="el-icon-menu"><b> {{ $t('collection.colRecordPanel') }}</b></i></h2>
        <!--催收记录start-->
        <div v-if="showPanel" class="audit_panel_module">
            <!--<div class="audit_panel_module_title">信审结论</div>-->
            <div class="panel_content tv_records">
                <el-form :rules="formRules" ref="urgingForm" :model="urgingForm" label-position="top">
                    <el-form-item :label="$t('collection.colModus')" prop="collectMethod"><!--催收形式-->
                        <el-select v-model="urgingForm.collectMethod" :placeholder="$t('verify.plsChoose')">
                            <el-option v-for="opt in telOptList.collectMethod" :label="opt.value" :key="opt.value" :value="opt.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('collection.colObject')" prop="touchObj"><!--催收对象-->
                        <el-select v-model="urgingForm.touchObj" :placeholder="$t('verify.plsChoose')">
                            <el-option v-for="opt in telOptList.touchObj" :label="opt.value" :key="opt.value" :value="opt.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--<el-form-item label="催收时间" prop="commitmentRepayDate">-->
                    <!--<el-date-picker style="width: 100%;" v-model="urgingForm.commitmentRepayDate" type="datetime"-->
                    <!--placeholder="请选择" :disabled="callDisable"></el-date-picker>-->
                    <!--</el-form-item>-->
                    <el-form-item :label="$t('common.telephoneNumber')" prop="collectPhone"><!--电话号码-->
                        <el-input type="text" v-model="urgingForm.collectPhone"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('collection.contactResult')" prop="telFeedBack"><!--联络结果-->
                        <el-select v-model="urgingForm.telFeedBack" :placeholder="$t('verify.plsChoose')">
                            <el-option v-for="opt in telOptList.telFeedBack" :label="opt.value" :key="opt.value" :value="opt.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item v-if="urgingForm.telFeedBack === '接通-承诺还款'" label="承诺还款日" prop="promiseTime">
                        <el-date-picker style="width: 100%;" v-model="urgingForm.promiseTime" :editable="false"
                                        value-format="yyyy-MM-dd" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm"
                                        type="date"></el-date-picker>
                    </el-form-item> -->
                    <el-form-item v-if="urgingForm.telFeedBack === '接通-承诺还款'" :label="$t('collection.promiseRepayTime')" prop="commitmentRepayDate"><!--承诺还款时间-->
                        <el-date-picker style="width: 100%;" v-model="urgingForm.commitmentRepayDate" type="datetime"
                                        value-format="yyyy-MM-dd HH:mm" :picker-options="pickerOptions"
                                        format="yyyy-MM-dd HH:mm"></el-date-picker>
                    </el-form-item>
                    <el-form-item :label="$t('common.remark')" prop="remark"><!--备注-->
                        <el-input v-model="urgingForm.remark" type="textarea" :rows="9" :maxlength="300"></el-input>
                    </el-form-item>
                    <el-form-item class="form_btn">
                        <el-checkbox v-model="urgingForm.isRemind" v-if="urgingForm.commitmentRepayDate !== ''" style="float:left;line-height:40px;">提前一个小时提醒</el-checkbox>
                        <el-button @click="submitForm" type="primary">{{ $t('common.submit') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!--催收记录end-->
    </div>
</template>

<script>
    import EventBus from '@/libs/event-bus';
    import {eventConf} from '@/config/';

    export default {
        name: 'auditPanel',
        components: {
        },
        props: {
            showPanel: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                // callDisable: false,
                orderId: '',
                overdueInfoId: '',
                urgingForm: {
                    collectPhone: '',
                    collectMethod: '',
                    touchObj: '',
                    telFeedBack: '',
                    remark: '',
                    commitmentRepayDate: '',
                    // promiseTime: '',
                    isRemind: false
                },
                telOptList: {
                    collectMethod: [],
                    touchObj: [],
                    telFeedBack: []
                },
                formRules: {
                    collectPhone: [
                        {required: true, message: this.$t('verify.plsInput')},
                    ],
                    collectMethod: [
                        {required: true, message: this.$t('verify.plsChoose')}
                    ],
                    touchObj: [
                        {required: true, message: this.$t('verify.plsChoose')}
                    ],
                    telFeedBack: [
                        {required: true, message: this.$t('verify.plsChoose')}
                    ],
                    commitmentRepayDate: [
                        {required: true, message: this.$t('verify.plsChoose')}
                    ],
                    remark: [],
                    // promiseTime: []
                },
                pickerOptions: {
                    disabledDate(time) {
                        const now = new Date();
                        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
                        return time.getTime() < today.getTime();
                    }
                },
                callRecordId: '',
                myParamsRelationship: '',
            };
        },
        watch: {
            'urgingForm.telFeedBack'(val) {
                // 接通-承诺还款 时才能选择承诺还款时间
                if (val !== '接通-承诺还款') {
                    this.urgingForm.commitmentRepayDate = '';
                    this.urgingForm.isRemind = false;
                }
            }
        },
        methods: {
            getDicts() {
                const params = {
                    type: 8,
                };
                this.$api.collection.getDicts(params).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        this.telOptList.collectMethod = data.collectMethods;
                        this.telOptList.touchObj = data.touchObjs;
                        this.telOptList.telFeedBack = data.telFeedBacks;
                    }
                });
            },
            submitForm() {
                this.$refs.urgingForm.validate((val) => {
                    if (val) {
                        let params = {
                            callRecordId: this.callRecordId ? this.callRecordId : '0',
                            overdueInfoId: this.overdueInfoId,
                            commitmentRepayDate: this.urgingForm.commitmentRepayDate,
                            // promiseTime: this.urgingForm.promiseTime,
                        };
                        params = Object.assign(params, this.urgingForm);
                        params.commitmentRepayDate = new Date(this.urgingForm.commitmentRepayDate).getTime();
                        this.$api.collection.addNotesPre(params).then((res) => {
                            const {status, error} = res;
                            if ('1' === status && error === '00000000') {
                                this.$refs.urgingForm.resetFields();
                                EventBus.$emit(eventConf.PREURGINGNOPAY);
                                // this.callDisable = false;
                            }
                        });
                    }
                });
            },
            listenEvent() {
                EventBus.$on(eventConf.CALL_EVENT, (data) => {
                    const {tel, relationship, callRecordId} = data;
                    // this.urgingForm.commitmentRepayDate = time;
                    this.urgingForm.collectPhone = tel;
                    this.callRecordId = callRecordId;
                    this.urgingForm.touchObj = relationship;
                    this.urgingForm.collectMethod = '电话';
                    // this.callDisable = true;
                });
            },
        },
        created() {
            this.listenEvent();
            const params = this.$route.params;
            this.overdueInfoId = params.id;
            this.orderId = params.orderId;
            this.getDicts();
        }
    };
</script>

<style lang="scss" scoped>
    @import "~@/assets/scss/function";

    .audit_panel {
        /*padding: 0 16px;*/
    }

    .opacity_panel {
        opacity: 0.6;
    }

    .urging_panel_title {
        height: 52px;
        line-height: 52px;
        background-image: url("~@/assets/img/icon_edit.png");
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 32px;
        border-bottom: 1px solid #d4d7da;
        margin: 0 16px;
    }

    .audit_panel_module {
        margin: 20px 0 30px;
    }

    .audit_panel_module_title {
        padding-left: 16px;
        border-left: 2px solid $primary;
        margin-bottom: 12px;
    }

    .panel_content {
        padding: 0 16px;
        font-size: 12px;
    }

    /*.warning_tips{*/
    /*font-size: 12px;*/
    /*}*/
    .tips_row {
        margin-top: 12px;
        color: #a6a8aa;
    }

    .tips_row_title {
        color: $colorText;
    }

    .tips_code, .tips_type {
        padding-right: 5px;
    }

    .form_btn {
        text-align: right;
    }

    .conclusion_radio {
        text-align: right;
    }
</style>
